<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    本地引入-->
    <script src="../vue/vue.js"></script>
</head>
<body>
<!--
   vue实例和容器绑定的细节处理
   1. vm和容器对应关系   一对一   容器标识 id
   2. template模板的特点
       2.1   容器中有初始内容  则会被template模板覆盖
       2.2   模板的内容需要包裹在一个根标签下
       2.3   字符串的形式编写模板  结构复杂时需要进行字符串拼接  过程繁琐
           2.3.1   字符串模板语法  解决
-->
<!-- 初始化容器-->
<div id="app">


</div>


<script>

    //  1. 创建vue实例  Vue()  构造函数   每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的
    let  vm = new Vue({
        template:`
            <div>
                <h1>hello vue</h1>
                <h2>hello python</h2>
            </div>
        `
    })

    // 2. vue实例和容器绑定  挂载   $mount('#app')   推荐
    vm.$mount('#app')
    // 参数也可以是节点对象
    // vm.$mount(document.getElementById('app'))
</script>


</body>
</html>
